<template>
    <div class="page">
        <nav-top style="position:sticky; top: 0; left: 0;right: 0;"></nav-top>
        <div class="ball1 bg"></div>
        <div class="ball2 bg"></div>
        <div class="ball3 bg"></div>
        <div class="ball4 bg"></div>
        <div class="ball5 bg"></div>
        <div class="ball6 bg"></div>
        <div class="ball7 bg"></div>
        <div class="bg1 bg"></div>
        <div class="bg2 bg"></div>
        <div class="bg3 bg"></div>
        <div class="bg4 bg"></div>
        <div class="bg5 bg"></div>
        <div class="bg6 bg"></div>


        <div class="main">
            <div class="zx">
                <ul class="zx-list">
                    <li v-for="item in list1" :key="item">
                        <div class="avatar" :style="{ 'backgroundImage': 'url(' + item.avatar + ')' }"></div>
                        <div class="name" :data-font="$i18n.locale">{{ $i18n.locale == 'en' ? item.enName : item.name }}
                        </div>
                        <div class="description">
                            <div class="description-item"
                                v-for="d in $i18n.locale == 'en' ? item.enDescription : item.description" :key="d">
                                <p :data-font="$i18n.locale">{{ d }}</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="zzwy">
                <div class="title" :data-font="$i18n.locale">{{ $t('committee.title1') }}</div>
                <ul class="zzwy-list">
                    <li v-for="item in list2" :key="item">
                        <div class="avatar" :style="{ 'backgroundImage': 'url(' + item.avatar + ')' }"></div>
                        <div class="name" :data-font="$i18n.locale">{{ $i18n.locale == 'en' ? item.enName : item.name }}
                        </div>
                        <div class="description">
                            <div class="description-item"
                                v-for="d in $i18n.locale == 'en' ? item.enDescription : item.description" :key="d">
                                <p :data-font="$i18n.locale">{{ d }}</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="msz">
                <div class="title" :data-font="$i18n.locale">{{ $t('committee.title2') }}</div>
                <ul class="msz-list">
                    <li v-for="item in list3" :key="item">
                        <div class="avatar" :style="{ 'backgroundImage': 'url(' + item.avatar + ')' }"
                            :alt="$i18n.locale == 'en' ? item.enName : item.name"></div>
                        <div class="name" :data-font="$i18n.locale">{{ $i18n.locale == 'en' ? item.enName : item.name }}
                        </div>
                        <div class="description">
                            <p :data-font="$i18n.locale">{{
                                $i18n.locale == 'en' ? item.enDescription : item.description
                            }}</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="mszry">
                <p v-for="item in $i18n.locale == 'en' ? list4.en : list4.zh" :key="item" :data-font="$i18n.locale">
                    {{ item }}
                </p>
            </div>
        </div>
    </div>
</template>

<script>
import navTop from '@/components/common/nav-top'
export default {
    name: 'committee',
    components: {
        navTop
    },
    data() {
        return {
            list1: [
                {
                    avatar: require('@/assets/img/committee/1.png'),
                    name: "主席  张先恩",
                    description: [
                        '深圳理工大学（筹）合成生物学院院长、讲席教授',
                        '中国科学院生物物理研究所研究员',
                        '加拿大阿尔伯塔大学荣誉科学博士',
                        '美国医学与生物工程院Fellow',
                        '英国皇家化学会Fellow',
                        '中国生物工程学会副理事长、合成生物学分会主任'
                    ],
                    enName: 'Chair: Xianen Zhang',
                    enDescription: ["Professor at Shenzhen Institute of Advanced Technology, Chinese Academy of Sciences(SIAT)"]
                },
                {
                    avatar: require('@/assets/img/committee/2.png'),
                    name: "副主席  刘陈立",
                    description: [
                        '中国科学院深圳先进技术研究院副院长、深圳合成生物学创新研究院院长',
                        '深圳理工大学（筹）学术委员会副主任',
                        '中国科学院定量工程生物学重点实验室主任',
                        '中国生物工程学会合成生物学专业委员会副主任兼秘书长',
                        '美国微生物学会国家代表',
                        '亚洲合成生物学协会执委',
                        '国家重点研发计划首席科学家',
                        '中国科学院学术委员会“基础前沿交叉”专门委员会委员'
                    ],
                    enName: 'Vice chair: Chenli Liu',
                    enDescription: ["Professor at SIAT"]
                }
            ],
            list2: [
                {
                    avatar: require('@/assets/img/committee/3.png'),
                    name: '傅雄飞',
                    description: [
                        '中国科学院深圳先进技术研究院合成生物学研究所',
                        '所长、研究员'
                    ],
                    enName: 'Xiongfei Fu',
                    enDescription: ['Professor at SIAT']
                },
                {
                    avatar: require('@/assets/img/committee/4.png'),
                    name: '安一硕',
                    description: [
                        '中国科学院深圳先进技术研究院合成生物学研究所',
                        '副所长'
                    ],
                    enName: 'Yishuo An',
                    enDescription: ['']
                },
                {
                    avatar: require('@/assets/img/committee/5.png'),
                    name: '王楠',
                    description: [
                        '中国科学院深圳先进技术研究院合成生物学研究所',
                        '所长助理'
                    ],
                    enName: 'Nan Wang',
                    enDescription: ['']
                },
                {
                    avatar: require('@/assets/img/committee/6.png'),
                    name: '魏平',
                    description: ['中国科学院深圳先进技术研究院合成生物学研究所',
                    '所长助理', '细胞与基因线路设计中心', '主任、研究员'],
                    enName: 'Ping Wei',
                    enDescription: ['Professor at SIAT']
                },
                {
                    avatar: require('@/assets/img/committee/7.png'),
                    name: '金帆',
                    description: ['中国科学院深圳先进技术研究院合成生物学研究所', '研究员'],
                    enName: 'Fan Jin',
                    enDescription: ['Professor at SIAT']
                },
                {
                    avatar: require('@/assets/img/committee/8.png'),
                    name: '司同',
                    description: ['中国科学院深圳先进技术研究院合成生物学研究所', '研究员'],
                    enName: 'Tong Si',
                    enDescription: ['Professor at SIAT']
                },
                {
                    avatar: require('@/assets/img/committee/9.png'),
                    name: '罗巍',
                    description: ['中国科学院深圳先进技术研究院合成生物学研究所产业创新与转化中心负责人'],
                    enName: 'Wei Luo',
                    enDescription: ['']
                },
            ],
            list3: [
                {
                    avatar: require('@/assets/img/committee/10.png'),
                    name: '易啸',
                    description: '秘书长，中国科学院深圳先进技术研究院合成生物学研究所研究员',
                    enName: 'Xiao Yi',
                    enDescription: 'Professor at SIAT'
                },
                {
                    avatar: require('@/assets/img/committee/11.png'),
                    name: '吴蔚',
                    description: '秘书',
                    enName: 'Wei Wu',
                    enDescription: ''
                },
                {
                    avatar: require('@/assets/img/committee/12.png'),
                    name: '周启君',
                    description: '秘书',
                    enName: 'Qijun Zhou',
                    enDescription: ''
                },
            ],
            list4: {
                zh: ['【首届合成生物学竞赛创新赛秘书】',
                    '文字内容：张鑫卉、冷梦甜、陈琪通',
                    '美工设计：吴蔚、朱芳谊、张荣汇、蔡卓苒、金晓萌',
                    '会场布置：黄翰英、程翊楠、洪祥达、刘卓林',
                    '人员组织：张亭、刘豫瑾、高艺博、朱家谊、王雨琪',
                    '后勤保障：陈嘉利、卢汉青、郑敏',
                    '赛场流程：周启君、陈萌萌、冯伟欣、许雪航、李卓锋、章雪婷、陈琪通',
                    '主持人：付立豪、黄文琦、刘卓林、陈茜',
                    '颁奖组：陈凯迪、张靖凡',
                    '统分组：王丽、王昊、周玉洁、何利丹、邓贺文、张鑫、曾瑾、彭云',
                    '宣传直播：汪琳、赵梓杉、岳震、赵文龙、王鸿奎',
                    '财务工作：钟文君、麦心缘',
                    '卓宏接待：张梅、刘豫瑾、麦心缘',
                    '大设施：张智彧、郦野'
                ],
                en: [
                    '[Organizing staff for the first Synbio Challenges]',
                    'Text drafting: Xinhui Zhang, Mengtian Leng, Qitong Chen',
                    'Art Design: Wei Wu, Fangyi Zhu, Huirong Zhang, Zhuoran Cai, Xiaomeng Jin',
                    'Venue setup: Hanying Huang, Yinan Cheng, Xiangda Hong, Zhuolin Liu',
                    'Reception：Ting Zhang, Yujin Liu, Yibo Gao, Jiayi Zhu, Yuqi Wang',
                    'Logistic service: Jiali Chen, Hanqing Lu, Min Zheng',
                    'Judge assistants: Qijun Zhou, Mengmeng Chen, Weixin Feng, Xuehang Xu, Zhuofeng Li, Xueting Zhang, Qitong Chen',
                    'Hosts: Lihao Fu, Wenqi Huang, Zhuolin Liu, Qian Chen',
                    'Awards ceremony: Kaidi Chen, Jingfan Zhang',
                    'Scoring  Statistics: Li Wang, Hao Wang, Yujie Zhou, Lidan He, Hewen Deng, Xin Zhang, Jin Zeng, Yun Peng',
                    'Publicity and web - streaming: Lin Wang, Zishan Zhao, Zhen Yue, Wenlong Zhao, Hongkui Wang',
                    'Accounting: Wenjun Zhong, Xinyuan Mai',
                    'Reception at Zhuohong: Mei Zhang, Yujin Liu, Xinyuan Mai',
                    'Big Facility of Synthetic Biology at Shenzhen: Zhiyu Zhang, Ye Li'
                ]
            }
        }
    },
    methods: {

    }
}
</script>

<style lang="less" scoped>
.page {
    width: 51.2rem;
    min-height: 100vh;
    position: relative;

    .bg {
        pointer-events: none;
        z-index: -1;
    }

    .ball1 {
        width: 0.69rem;
        height: 0.69rem;
        background: url('@/assets/img/balls2_1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 6.03rem;
        top: 9.04rem;
    }

    .ball2 {
        width: 0.45rem;
        height: 0.45rem;
        background: url('@/assets/img/balls1_3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 4.16rem;
        top: 14.93rem;
    }

    .ball3 {
        width: 1.39rem;
        height: 1.39rem;
        background: url('@/assets/img/balls1_1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 6.91rem;
        top: 3.28rem;
    }

    .ball4 {
        width: 0.83rem;
        height: 0.83rem;
        background: url('@/assets/img/balls1_2.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 6.13rem;
        top: 5.52rem;
    }

    .ball5 {
        width: 2.08rem;
        height: 2.11rem;
        background: url('@/assets/img/balls3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 3.07rem;
        bottom: 8rem;
    }

    .ball6 {
        width: 1.25rem;
        height: 1.28rem;
        background: url('@/assets/img/balls5.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 5.68rem;
        bottom: 6.19rem;
    }

    .ball7 {
        width: 0.93rem;
        height: 0.96rem;
        background: url('@/assets/img/balls4.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 4.13rem;
        bottom: 4.11rem;
    }

    .bg1 {
        width: 6.13rem;
        height: 5.23rem;
        background: url('@/assets/img/relatedInformation/bg1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 0;
        top: 0;
    }

    .bg2 {
        width: 11.25rem;
        height: 7.97rem;
        background: url('@/assets/img/relatedInformation/bg2.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .bg3 {
        width: 10.35rem;
        height: 10.35rem;
        background: url('@/assets/img/relatedInformation/bg3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 14.8rem;
        bottom: 2.03rem;
    }

    .bg4 {
        width: 12.13rem;
        height: 6.24rem;
        background: url('@/assets/img/relatedInformation/bg4.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 4.37rem;
        bottom: 0;
    }

    .bg5 {
        width: 9.04rem;
        height: 10.43rem;
        background: url('@/assets/img/relatedInformation/bg5.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 0.51rem;
        top: 8.43rem;
    }

    .bg6 {
        width: 5.76rem;
        height: 6.4rem;
        background: url('@/assets/img/relatedInformation/bg6.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }
}

.main {
    width: 100%;
    padding: 1.49rem 9.07rem 1.71rem 9.07rem;

    .title {
        font-size: 1.17rem;
        font-weight: bold;
        color: #212121;
        line-height: 1.92rem;
        text-align: center;
    }

    .title[data-font='zh'] {
        font-family: 'AlibabaPuHuiTi-Bold', 'AlibabaPuHuiTi';
    }

    .title[data-font='en'] {
        font-family: 'RNSSanzSC-Bold, RNSSanzSC';
    }

    .zx {
        width: 100%;

        .zx-list {
            width: 100%;
            display: flex;
            align-items: center;
            flex-direction: column;

            li {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 0.64rem;

                .name {
                    margin-top: 0.21rem;
                    font-size: 0.59rem;
                    color: #212121;
                    line-height: 0.96rem;
                }

                .name[data-font='zh'] {
                    font-weight: normal;
                    font-family: 'IdeaFonts-DianHei-FEJ', 'IdeaFonts-DianHei';
                }

                .name[data-font='en'] {
                    font-weight: bold;
                    font-family: 'Helvetica-Bold, Helvetica';
                }

                .description {
                    .description-item {
                        p {
                            text-align: center;
                            font-weight: normal;
                            color: #68656C;
                        }

                        p[data-font='zh'] {
                            font-size: 0.53rem;
                            line-height: 0.85rem;
                            font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                        }

                        p[data-font='en'] {
                            font-size: 0.48rem;
                            line-height: 0.75rem;
                            font-family: 'Helvetica';
                        }
                    }
                }
            }

            li:nth-of-type(1) {
                margin-top: 0;
            }
        }
    }

    .zzwy {
        width: 100%;
        margin-top: 1.49rem;

        .zzwy-list {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: space-between;

            li {
                width: 5.87rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-left: 3rem;
                margin-top: 1rem;

                .name {
                    font-size: 0.59rem;
                    color: #212121;
                    line-height: 0.96rem;
                    margin-top: 0.21rem;
                }

                .name[data-font='zh'] {
                    font-weight: normal;
                    font-family: 'IdeaFonts-DianHei-CEJ', 'IdeaFonts-DianHei';
                }

                .name[data-font='en'] {
                    font-family: 'PingFangSC-Semibold, PingFang SC';
                    font-weight: 600;
                }

                .description {
                    p {
                        font-weight: normal;
                        color: #68656C;
                        text-align: center;
                    }

                    p[data-font='zh'] {
                        font-size: 0.53rem;
                        line-height: 0.85rem;
                        font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                    }

                    p[data-font='en'] {
                        font-size: 0.48rem;
                        font-family: 'Helvetica';
                        line-height: 0.75rem;
                    }
                }
            }

            li:nth-of-type(4n+1) {
                margin-left: 0;
            }
        }
    }

    .msz {
        width: 100%;
        margin-top: 1.49rem;

        .msz-list {
            width: 100%;
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
            justify-content: space-between;

            li {
                margin-top: 0.64rem;
                width: 5.87rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;

                .name {
                    font-size: 0.59rem;
                    color: #212121;
                    line-height: 0.96rem;
                    margin-top: 0.21rem;
                }

                .name[data-fomt='zh'] {
                    font-family: 'IdeaFonts-DianHei-CEJ', 'IdeaFonts-DianHei';
                    font-weight: normal;
                }

                .name[data-fomt='en'] {
                    font-family: 'PingFangSC-Semibold, PingFang SC';
                    font-weight: 600;
                }

                .description {
                    p {
                        text-align: center;
                        color: #68656C;
                        line-height: 0.85rem;
                    }

                    p[data-font='zh'] {
                        font-size: 0.53rem;
                        font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                        font-weight: normal;
                    }

                    p[data-font='en'] {
                        font-size: 0.48rem;
                        font-family: 'Helvetica';
                    }
                }
            }
        }
    }

    .mszry {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0.85rem;

        p {

            color: #68656C;

        }

        p[data-font='zh'] {
            font-size: 0.53rem;
            font-weight: normal;
            font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
            line-height: 0.85rem;
        }

        p[data-font='en'] {
            font-size: 0.48rem;
            font-family: 'PingFangSC-Regular, PingFang SC';
            font-weight: 400;
            line-height: 0.75rem;
        }

        p:nth-of-type(1) {
            font-size: 0.53rem;
            color: #212121;
            line-height: 0.85rem;
            margin-bottom: 0.32rem;
        }

        p[data-font='zh']:nth-of-type(1) {
            font-family: 'IdeaFonts-DianHei-EEJ', 'IdeaFonts-DianHei';
            font-weight: normal;
            font-size: 0.53rem;
        }

        p[data-font='en']:nth-of-type(1) {
            font-size: 0.53rem;
            font-family: 'PingFangSC-Regular, PingFang SC';
            font-weight: 400;
        }
    }
}

.avatar {
    width: 4.8rem;
    height: 4.8rem;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    border-radius: 50%;
    border: 2px solid #FFF;
}
</style>